<template>
  <div class="U000005-template1"
       :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div class="location-box" :class="{'location-box_2': datas.scanpicture_style != 1}">
      <div class="location-left" v-if="datas.show_location == 0">
        <i class="iconfont icon-order_locate"></i>
        <span>城市</span>
        <i class="iconfont icon-advertise-next"></i>
      </div>
      <div class="location-right">
        <i v-if="datas.scanpicture_style == 2" class="iconfont" :class="datas.scan_color&&datas.scan_color.isColor == 1?'icon-saoyisao':'icon-saoyisao_img'"></i>
        <i v-if="datas.scanpicture_style == 3" class="iconfont icon-all_search_2"></i>
        <span>{{datas.search_title}}</span>
        <template v-if="datas.scanpicture_style == 3"> 
          <i class="iconfont" :class="datas.scan_color&&datas.scan_color.isColor == 1?'icon-saoyisao':'icon-saoyisao_img'"></i>
        </template>
        <i class="iconfont" :class="datas.photograph_color&&datas.photograph_color.isColor == 1?'icon-photobzhaoxiang':'icon-photobzhaoxiang_img'"></i>
      </div>
      <div class="location-search" v-if="datas.scanpicture_style == 1">
        <i class="iconfont" :class="datas.scan_color&&datas.scan_color.isColor == 1?'icon-saoyisao':'icon-saoyisao_img'"></i>
      </div>
    </div>
  </div>
</template>

<script>
	// 自定义样式
	const css = function () {
		if(this.datas.preview_color) {
			const {
				preview_color,
				border_style,
				search_border_radius,
				bg_color,
				border_color,
				font_color,
				city_font_color,
        photograph_color,
        scan_color
			} = this.datas;

			return `
        .component-${this.id} .location-box, .component-${this.id} .location-box2{
            background-color: ${preview_color.color || '#f8f8f8'};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
        }
        .component-${this.id} .location-box .location-right{
            border-radius: ${search_border_radius}px;
            border: solid  ${border_style}px ${border_color};
            background-color: ${bg_color || '#f8f8f8'};
            color: ${font_color};
        }

        .component-${this.id} .location-search {
            color: ${city_font_color};
        }

        .component-${this.id} .location-box .icon-photobzhaoxiang {
            color: ${photograph_color.color};
        }
        .component-${this.id} .location-box .icon-photobzhaoxiang_img {
            background-image: url(${photograph_color.isColor == 2 ? photograph_color.image : ''});
        }

        .component-${this.id} .location-box .icon-saoyisao {
            color: ${scan_color.color};
        }
        .component-${this.id} .location-box .icon-saoyisao_img {
            background-image: url(${scan_color.isColor == 2 ? scan_color.image : ''});
            
        }

        .component-${this.id} .location-box .location-left {
            color: ${city_font_color};
        }

    `;
		}
	};

	export default {
		props: ['id', 'datas', 'styles'],
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
		},

		methods: {
		},

		mounted() {
		}
	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    width: 375px;
  }

  .location-box {
    display: flex;
    align-self: center;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    .location-left {
      display: flex;
      align-items: center;
    }

    .location-right {
      display: flex;
      align-items: center;
      flex: 1;
      height: 25px;
      line-height: 25px;
      align-self: center;
      padding: 0 8px;

      span{
        flex: 1;
        padding: 0 8px;
      }
    }

    .iconfont{
      width: 18px;
      height: 18px;
      line-height: 18px;
      display: block;
    }

    .location-search {
      text-align: center;
      margin-left: 5px;
      display: flex;
      align-items: center;
    }
    .icon-photobzhaoxiang{
      margin-left: 4px;
      color: #999;
    }
  }

 .location-box_2{
   .icon-saoyisao{
      padding-right: 4px;
      border-right: 1px solid #e6e6e6;
      width: 16px;
      height: 16px;
      line-height: 16px;
      box-sizing: content-box;
   }
 }

 .icon-photobzhaoxiang_img,.icon-saoyisao_img{
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 4px;
 }
</style>
